<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title></title>
		<link href="css/swiper.min.css" rel="stylesheet">
		<link href="css/style.css?sadsss" rel="stylesheet">
	</head>
	<body>
		<div class="main">
            <div class="audio" style="display:none; height: 0;width: 0;">
                <audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://test.likes.com.cn/Public/training/av/test.mp3" loop="loop"></audio>
            </div>
			<div class="hp-tips">
                <p>请保持您的手机处于屏幕锁屏状态</p>
				<img src="img/lock.png">
			</div>
            <div class="preview">
                <div class="video-con">
                    <video src="http://test.likes.com.cn/Public/training/av/v4.mp4" class="video" loop="loop" id="js-video" preload="true" x5-video-player-type="h5" poster="" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true" x-webkit-playsinline="true" style="object-fit: fill;object-position: center center;"></video>
                </div>
                <div class="play show" id="play"><div class="img"><img src="img/icon_play.png"></div></div>

                <div class="preview-swiper">
                    <div class="tips">
                        <h4>课程预览：横向跨步</h4>
                        <p>两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。</p>
                    </div>
                    <div class="flex-con">
                        <div class="swiper-con">
                            <div class="swiper-button swiper-button-prev"></div>
                            <div class="swiper-container swiper-no-swiping">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t1.png"></div>
                                    <div class="swiper-slide" data="av/v5.mp4" data-title="2课程预览：横向跨步" data-detail="2两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t2.png"></div>
                                    <div class="swiper-slide" data="av/v6.mp4" data-title="3课程预览：横向跨步" data-detail="3两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t3.png"></div>
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t4.png"></div>
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t5.png"></div>
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t6.png"></div>
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t6.png"></div>
                                    <div class="swiper-slide" data="av/v4.mp4" data-title="1课程预览：横向跨步" data-detail="1两脚打开稍比肩稍宽，右脚先压外刃，重心往右脚移。容易出现的误区：在该动作的时候，时常有新手两脚没有与肩同宽或者稍宽，随之带来的是重心的不稳定，导致摔倒。所以两脚稍宽是非常有必要强调的。请记住重心在右脚。"><img src="img/t6.png"></div>
                                </div>
                            </div>
                            <div class="swiper-button swiper-button-next"></div>
                        </div>
                        <a class="btn">开始挑战 > </a>
                    </div>
                </div>

            </div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/swiper.min.js"></script>
        <script src="js/jweixin-1.0.0.js"></script>
        <script src="js/app.js"></script>
		<script>
            var video = document.getElementById('js-video');
            var playBtn = document.getElementById('play');
            var size = $('.swiper-slide').size();
            var slidesPerView = 6;
            if(size <= 7){
                $(".swiper-button").hide();
                slidesPerView = 7;
            }
            $(".preview-swiper").addClass('show');
            $(".preview .tips").addClass('show');
            function setSize(){
                var size = {width:1028,height:640};
                var Wwidth = $(window).width();
                var Wheight = $(window).height();
                var scale = (Wheight/Wwidth)/(size.width/size.height);
                $('.preview').css({width:Wheight,height:Wwidth,top:(Wheight-Wwidth)/2,left:0-(Wheight-Wwidth)/2});
                $('.video').css({'transform':'translate(-50%,-50%) scale('+scale+')','-webkit-transform':'translate(-50%,-50%) scale('+scale+')',width:Wheight});
            }
            setSize();
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",setSize, false);
            window.addEventListener('resize',function(){
                setSize();
            });
            var mySwiper = new Swiper('.swiper-container', {
                noSwiping : true,
                slidesPerView : slidesPerView,
                slidesPerGroup : 1,
                spaceBetween:'2%',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                }
            });
            $(".swiper-slide").eq(0).addClass('on')
            $(".swiper-slide").on('click',function(){
                $(this).addClass('on').siblings().removeClass("on");
                var src = $(this).attr('data');
                var title = $(this).attr('data-title');
                var detail = $(this).attr('data-detail');
                $(".tips h4").text(title);
                $(".tips p").text(detail);
                video.src=src;
                video.load();
                playVideo();
            });

            document.addEventListener("WeixinJSBridgeReady",function(){
                if(window.netease.ua.ios) {
                    $(".play").removeClass('show');
                    video.play();
                }
            }, false);
            video.addEventListener('click',function(){
                $(".play").removeClass('show')
                video.play();
            });
            playBtn.addEventListener('click',function(){
                $(".play").removeClass('show');
                video.play();
            });
            function playVideo(){
                $(".play").removeClass('show');
                video.play();
            }
            if(window.netease.ua.ios){
                playVideo();
            }
            // 音乐播放
            autoPlayMusic();
            function autoPlayMusic() {
                // 自动播放音乐效果，解决浏览器或者APP自动播放问题
                function musicInBrowserHandler() {
                    musicPlay(true);
                    document.body.removeEventListener('touchstart', musicInBrowserHandler);
                }
                document.body.addEventListener('touchstart', musicInBrowserHandler);

                // 自动播放音乐效果，解决微信自动播放问题
                function musicInWeixinHandler(){
                    musicPlay(true);
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        musicPlay(true);
                    }, false);
                    document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
                }
                document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
            }
            function musicPlay(isPlay) {
                var media = document.querySelector('#bg-music');
                if (isPlay && media.paused) {
                    media.play();
                }
                if (!isPlay && !media.paused) {
                    media.pause();
                }
            }
		</script>
	</body>
</html>